<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML5画布CanvasAPI-五子棋</title>
		<style type="text/css">
			#canv1 {
				background: #963;
				border-radius: 10px;
			}
		</style>
	</head>
	<body onload="init()">
		<canvas id="canv1" width="640" height="640"></canvas>
		<script type="text/javascript">
			//初始化变量及布局
			//
			var canv = document.getElementById('canv1')
			var ctx = canv.getContext('2d')
			var game_arr = {},
				gameArr = [],
				g_arr = [],
				wins = [],
				winsAB = [0,0],
				mark = 0,
				Over = false

			function init() {
				ctx.save()
				ctx.strokeStyle = '#ccc'
				for (var i = 1; i < 16; i++) {
					ctx.moveTo(i * 40, 40)
					ctx.lineTo(i * 40, 600)
					ctx.stroke()
					ctx.moveTo(40, i * 40)
					ctx.lineTo(600, i * 40)
					ctx.stroke()
					for (var j = 1; j < 16; j++) {
						game_arr[j + '-' + i] = {
							mark:-1,
							score:[0,0]
						}
					}
				}
				ctx.beginPath()
				ctx.arc(320,320,5,0,2*Math.PI)
				ctx.fill()
				ctx.restore()
				gameArr = Object.keys(game_arr)
				gameArr.forEach(n => {
					wins = wins.concat(getwins(n))
				})
				winsAB.fill(wins.slice()) 
			}

			function getwins(xy) {
				var x = xy.split('-')[0] * 1,
					y = xy.split('-')[1] * 1
				var arr = new Array([], [], [], [])
				for (var i = 0; i < 5; i++) {
					if (x < 12) arr[0].push((x + i) + '-' + y)
					if (y < 12) arr[1].push(x + '-' + (y + i))
					if (x < 12 && y < 12) arr[2].push((x + i) + '-' + (y + i))
					if (x < 12 && y > 4) arr[3].push((x + i) + '-' + (y - i))
				}
				return arr.filter(n => n.length == 5)
			}

			function chess(xy) {
				if(Over)return
				var x = xy.split('-')[0] * 1,
					y = xy.split('-')[1] * 1
				ctx.beginPath()
				ctx.fillStyle = mark == 0 ? '#000' : '#fff'
				ctx.arc(x * 40, y * 40, 19, 0, 2 * Math.PI)
				ctx.fill()
				g_arr.push(xy)
				game_arr[xy].mark=mark
				if(g_arr.length>8)checkOver(xy,mark)
				winsAB[mark]=winsAB[mark].filter(n=>!n.some(n=>n==xy))
				mark = mark ^ 1
			}
			canv.addEventListener('click', A_chess, true)

			function A_chess() {
				if (!Over ) {
					var ev = event || window.event
					var x = Math.round((ev.layerX) / 40)
					var y = Math.round((ev.layerY) / 40)
					if (x * y > 0 && x < 15 && y < 15 && !g_arr.includes(x + '-' + y)) {
						chess(x + '-' + y)
					}
					B_chess()
				}
			}

			function B_chess() {
				var max=0,max_xy
				gameArr.forEach(n=>{
					game_arr[n].score=[0,0]
				})
				winsAB.forEach((w,i)=>{
					w.sort(()=>Math.random()-0.5).forEach(n=>{
						if(n.some(n=>g_arr.includes(n))){
							let len=n.filter(n=>g_arr.includes(n)).length
							n.forEach(m=>{
								if(game_arr[m].mark==-1){
									game_arr[m].score[i]+=len*len*len*100
									if(max<game_arr[m].score[i]){
										max=game_arr[m].score[i]
										max_xy=m
									}
								}
								
							})
						}
					})
				})
				chess(max_xy)
			}
			//winsAB[0].filter(n=>n.reduce((s,m)=>s+g_arr.includes(m)*1,0)==4)
			function checkOver(xy,m){
				var win=winsAB[m^1]
				for(var i=0;i<win.length;i++){
					if(win[i].every(n=>game_arr[n].mark==m)){
						setTimeout(()=>alert('恭喜完成'),100)
						Over=true
						return
					}
					
				}
			}
		</script>
	</body>
</html>
